import { reactive } from 'vue'

let id = 0

export function createModalService() {
  const modals = reactive([])

  function open(component, props = {}) {
    const modalId = ++id
    modals.push({ id: modalId, component, props })
    return modalId
  }

  function close(id) {
    const index = modals.findIndex(m => m.id === id)
    if (index !== -1) modals.splice(index, 1)
  }

  return {
    modals,
    open,
    close,
  }
}
